<breadcrumb></breadcrumb>

<mat-card>
  <section>
    <h2>Radio buttons in group</h2>
    <mat-radio-group name="seasons" [(ngModel)]="favoriteSeason" aria-label="Seasons">
      <mat-radio-button *ngFor="let season of seasonOptions" [value]="season">
        {{season}}
      </mat-radio-button>
    </mat-radio-group>
  </section>

  <section>
    <h2>Radio buttons with align-end label position</h2>
    <mat-radio-group name="bread" align="end" aria-label="Breads">
      <mat-radio-button value="toast">Toast</mat-radio-button>
      <mat-radio-button value="biscuit">Biscuit</mat-radio-button>
      <mat-radio-button value="bagel">Bagel</mat-radio-button>
    </mat-radio-group>
  </section>

  <section>
    <h2>Disabled radio buttons</h2>
    <p>
      This section contains three radio buttons for "Yes", "No", and "Maybe".
      The "Maybe" radio button is disabled.
    </p>
    <mat-radio-button name="disable">Yes</mat-radio-button>
    <mat-radio-button name="disable">No</mat-radio-button>
    <mat-radio-button name="disable" [disabled]="true">Maybe</mat-radio-button>
  </section>

  <section>
    <h2>Radio buttons with different colors</h2>
    <mat-radio-button name="color">Default (accent)</mat-radio-button>
    <mat-radio-button name="color" color="primary">Primary</mat-radio-button>
    <mat-radio-button name="color" color="accent">Accent</mat-radio-button>
    <mat-radio-button name="color" color="warn">Warn</mat-radio-button>
  </section>
</mat-card>